<template>
	<div>
		<el-form>
			<el-row>
				<el-col :span="8">
					<el-form-item label="图片类型:">
						<el-select v-model="info.picType" placeholder="请选择">
							<el-option label="营业执照" value="A001"></el-option>
							<el-option label="法人身份证正面" value="A002"></el-option>
							<el-option label="法人身份证反面" value="A003"></el-option>
							<el-option label="手持身份证合影照片" value="A009"></el-option>
							<el-option label="结算账户正面" value="A004"></el-option>
							<el-option label="结算账户反面" value="A005"></el-option>
							<el-option label="开户许可证" value="A011"></el-option>
							<el-option label="非法人身份证头像面" value="A013"></el-option>
							<el-option label="非法人身份证国徽面" value="A014"></el-option>
							<el-option label="法人/非法人手持授权书" value="B004"></el-option>
							<el-option label="法人/非法人结算授权书" value="B005"></el-option>
							<el-option label="商户门头照片" value="A006"></el-option>
							<el-option label="内景照片" value="A007"></el-option>
							<el-option label="收银台照片" value="A008"></el-option>
							<el-option label="租赁合同 第一页" value="B001"></el-option>
							<el-option label="租赁合同 第二页" value="B002"></el-option>
							<el-option label="租赁合同 第三页" value="B003"></el-option>
							<el-option label="租赁面积图片" value="B006"></el-option>
							<el-option label="经营业务图片" value="B007"></el-option>
							<el-option label="收单协议盖章页" value="A010"></el-option>
							<el-option label="收单协议首页（纸质合同必填，电子合同非必填）" value="A012"></el-option>
							<el-option label="其他1" value="B008"></el-option>
							<el-option label="其他2" value="B009"></el-option>
						</el-select>
					</el-form-item>
					<div class="box-img">
						<el-upload class="avatar-uploader" action="https://openpay.duolaibei.com/admin/upload/upload"
							:show-file-list="false" :on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<el-form-item class="butt">
							<el-button type="primary" @click="onSubmit">提交</el-button>
						</el-form-item>
					</div>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>
<script>
	export default {
		props: {
			id: Number
		},
		data() {
			return {
				info:{
					'picType':'',
					'path':'',
				},
				imageUrl: ''
			}
		},
		created() {
		},
		methods: {
			onSubmit() {
				if(this.info.path == ''){
					this.$message.error('图片不能为空！');
				}
				let that = this;
				this.$axios({
					url:'/admin/channel/other',
					data:{
						userID: this.id,
						type: 5,
						genre: 1,
						picType: this.info.picType,
						path:this.info.path,
					},
					success(res){
						if(res.data.code == 200){
							that.$message.success('上传成功');
						}else{
							that.$message.error(res.data.msg);
						}
					}
				});
			},
			handleAvatarSuccess(res, file) {
				if(res.code == 200){
					this.imageUrl = res.content.path;
					this.info.path = res.content.path;
				}
			},
			beforeAvatarUpload(file) {
				//const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
			}
		}
	}
</script>
<style scoped>
	.box-img {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.butt {
		margin: 40px;
	}
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		border: 1px dashed #d9d9d9;
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
